<template>
  <div class="explainText">
    <p>
      远程搜索需同时设置 filterable、remote-method、loading 三个 props，其中
      loading 用于控制是否正在搜索中，remote-method 是远程搜索的方法。
    </p>
    <p>注意：需要给 Option 设置 key。 本例为美国州名，例如输入New york。</p>
  </div>
  <div style="display: flex; width: 700px; justify-content: space-between">
    <e-select
      style="width: 300px"
      v-model="model"
      filterable
      :remote-method="remoteMethod1"
      :loading="loading1"
    >
      <e-option
        v-for="(option, index) in options1"
        :value="option.value"
        :key="index">{{ option.label }}</e-option
      >
    </e-select>
    <e-select
      style="width: 300px"
      v-model="model1"
      multiple
      filterable
      :remote-method="remoteMethod2"
      :loading="loading2"
    >
      <e-option
        v-for="(option, index) in options2"
        :value="option.value"
        :key="index">{{ option.label }}</e-option
      >
    </e-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      model: '',
      loading1: false,
      options1: [],
      model1: [],
      loading2: false,
      options2: [],
      list: [
        'Alabama',
        'Alaska',
        'Arizona',
        'Arkansas',
        'California',
        'Colorado',
        'Connecticut',
        'Delaware',
        'Florida',
        'Georgia',
        'Hawaii',
        'Idaho',
        'Illinois',
        'Indiana',
        'Iowa',
        'Kansas',
        'Kentucky',
        'Louisiana',
        'Maine',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
        'Nebraska',
        'Nevada',
        'New hampshire',
        'New jersey',
        'New mexico',
        'New york',
        'North carolina',
        'North dakota',
        'Ohio',
        'Oklahoma',
        'Oregon',
        'Pennsylvania',
        'Rhode island',
        'South carolina',
        'South dakota',
        'Tennessee',
        'Texas',
        'Utah',
        'Vermont',
        'Virginia',
        'Washington',
        'West virginia',
        'Wisconsin',
        'Wyoming',
      ],
    }
  },
  methods: {
    remoteMethod1(query) {
      if (query !== '') {
        this.loading1 = true
        setTimeout(() => {
          this.loading1 = false
          const list = this.list.map((item) => {
            return {
              value: item,
              label: item,
            }
          })
          this.options1 = list.filter(
            (item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          )
        }, 200)
      } else {
        this.options1 = []
      }
    },
    remoteMethod2(query) {
      if (query !== '') {
        this.loading2 = true
        setTimeout(() => {
          this.loading2 = false
          const list = this.list.map((item) => {
            return {
              value: item,
              label: item,
            }
          })
          this.options2 = list.filter(
            (item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          )
        }, 200)
      } else {
        this.options2 = []
      }
    },
  },
}
</script>
<style>
.explainText {
  /* display: flex; */
  font-size: 14px;
  color: #9013fe;
  margin: 10px 0px;
}
.explainText > p {
  font-size: 14px;
  color: #6f7d96;
  padding-left: 10px;
}
</style>
